angularjs面试总结

Angular面试从喜剧到悲剧的十个问题

ng-if 跟 ng-show/hide 的区别

1. ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。
2. ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。

angular 的数据绑定

脏检查机制。双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。

原理就是，Angular 在 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发，遍历所有的 $watch，最后更新 dom。
例如，click 时会产生一次更新的操作（至少触发两次 $digest 循环）

<button ng-click="val=val+1">increase 1</button>

按下按钮

• 浏览器接收到一个事件，进入到 angular context
• $digest 循环开始执行，查询每个 $watch 是否变化
• 由于监视 $scope.val 的 $watch 报告了变化，因此强制再执行一次 $digest 循环
• 新的 $digest 循环未检测到变化
• 浏览器拿回控制器，更新 $scope.val 新值对应的 dom

$digest 循环的上限是 10 次（超过 10次后抛出一个异常，防止无限循环）。

两个平级界面块 a 和 b，如果 a 中触发一个事件，有哪些方式能让b 知道

1. 共用服务
2. $rootScope
3. 广播

ngRoute 和 ui.router

区别

ngRoute 模块是 Angular 自带的路由模块，而 ui.router 模块是基于 ngRoute模块开发的第三方模块。

ui.router 是基于 state （状态）的， ngRoute 是基于 url 的，ui.router模块具有更强大的功能，主要体现在视图的嵌套方面。

使用 ui.router 能够定义有明确父子关系的路由，并通过 ui-view 指令将子路由模版插入到父路由模板的 <div ui-view></div> 中去，从而实现视图嵌套。而在 ngRoute 中不能这样定义，如果同时在父子视图中 使用了 <div ng-view></div> 会陷入死循环。